<!DOCTYPE html>
<!--suppress ALL -->
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title id="title">swagger-ui-zfs</title>
    <link href="/static/plugins/css/bootstrap.css" rel="stylesheet">
    <link href="/static/plugins/template/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/static/plugins/template/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="/static/plugins/template/css/plugins/json-view/jquery.json-viewer.css" rel="stylesheet">
    <link href="/static/plugins/template/css/animate.min.css" rel="stylesheet">
    <link href="/static/plugins/template/css/style.min.css?v=4.1.0" rel="stylesheet">
    <link href="/static/css/zfs-api-ui.css" rel="stylesheet">
</head>
<body>
<div id="rootDiv" class="row">
    <!--描述-->
    <div class="col-sm-12 page-header">
        <div class="col-sm-2">
            <select id="groups" class="form-control m-b">
                <option v-for="group in groups">{{group}}</option>
            </select>
            <button type="button" class="btn" onclick="setCookieModalShow()">Set Cookie</button>
            <button type="button" class="btn" onclick="setHeaderModalShow()">Set Header</button>
        </div>
        <div class="col-sm-1 form-group">
            <input class="form-control disabled" id="agreement" name="agreement" type="text" placeholder="agreement">
        </div>
        <div class="col-sm-3 form-group">
            <input class="form-control disabled" id="domain" name="domain" type="text" placeholder="domain">
        </div>
        <div class="col-sm-1 form-group">
            <input class="form-control disabled" id="port" name="port" type="text" placeholder="port">
        </div>
        <div class="col-sm-1 form-group">
            <button type="button" class="btn" onclick="init()">init api</button>
        </div>
    </div>
    <div class="col-sm-12">
        <!--class-->
        <div class="tabs-container">
            <div class="tabs-left">
                <ul class="nav nav-tabs">
                    <li v-for="(api,classIndex) in apis" :class="{'active':classIndex==0}">
                        <a data-toggle="tab" class="titleCss" :href="'#tab-class-'+classIndex" :title="api.name+' : '+api.desc">{{api.name}} : {{api.desc}}</a>
                    </li>
                </ul>
                <div class="tab-content ">
                    <div v-for="(api,classIndex) in apis" :id="'tab-class-'+classIndex" class="tab-pane" :class="{'active':classIndex==0}">
                        <div class="panel-body">
                            <!--method-->
                            <div class="tabs-container">
                                <div class="tabs-left">
                                    <ul class="nav nav-tabs">
                                        <li v-for="(methodModel,methodIndex) in api.methodModels" :class="{'active':methodIndex==0}">
                                            <a data-toggle="tab" class="titleCss" :href="'#tab-method-'+methodIndex" :title="methodModel.name+' : '+methodModel.desc">{{methodModel.name}} : {{methodModel.desc}}</a>
                                        </li>
                                    </ul>
                                    <div class="tab-content ">
                                        <div v-for="(methodModel,methodIndex) in api.methodModels" :id="'tab-method-'+methodIndex" class="tab-pane" :class="{'active':methodIndex==0}">
                                            <div class="panel-body">
                                                <!--properties-->
                                                <form :id="'form-'+classIndex+'-'+methodIndex">
                                                    <!--请求路径-->
                                                    <div class="col-sm-12 m-b"><label>path: {{api.path}}/{{methodModel.path}}</label></div>
                                                    <!--请求方式-->
                                                    <div class="col-sm-12 m-b">
                                                        <select class="form-control mySelected1" id="type" name="type">
                                                            <option v-for="(type,typeIndex) in methodModel.method" :value="type">{{type}}</option>
                                                        </select>
                                                    </div>
                                                    <!--请求参数-->
                                                    <div class="col-sm-12">
                                                        <div class="ibox-title">
                                                            <h5>Parameters</h5>
                                                        </div>
                                                        <div class="ibox-content">
                                                            <table class="table table-hover">
                                                                <thead>
                                                                <tr>
                                                                    <th>Parameter</th>
                                                                    <th>Value</th>
                                                                    <th>Desc</th>
                                                                    <th>Data Type</th>
                                                                </tr>
                                                                </thead>
                                                                <tbody>
                                                                <tr v-for="(k,v) in methodModel.parameterModels">
                                                                    <td><span class="line">{{k.name}}</span>
                                                                    <td><span class="line"><input type="text" :name="k.name" :required="k.required" :aria-required="k.required" :placeholder="k.required ? 'required' : ''"></span>
                                                                    <td><span class="line">{{k.desc}}</span>
                                                                    <td><span class="line">{{k.type}}</span>
                                                                </tr>
                                                                </tbody>
                                                            </table>
                                                            <button type="button" class="btn" @click="submit('form-'+classIndex+'-'+methodIndex,api.path+'/'+methodModel.path)">Submit</button>
                                                        </div>
                                                    </div>
                                                    <!--响应数据-->
                                                    <div class="col-lg-7 ibox-content">
                                                        <pre :id="'rbc-form-'+classIndex + '-' + methodIndex"></pre>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!---->
<div class="modal inmodal fade" id="setCookie" tabindex="-1" role="dialog"  aria-hidden="true" data-backdrop="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h5 class="modal-title">Set Cookie</h5>
            </div>
            <div class="ibox-content">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>Key</th>
                                <th>Value</th>
                                <th>Delete</th>
                            </tr>
                            </thead>
                            <tbody id="cookie">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="addCokie()"> Add </button>
                <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!---->
<div class="modal inmodal fade" id="setHeader" tabindex="-1" role="dialog"  aria-hidden="true" data-backdrop="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h5 class="modal-title">Set Header</h5>
            </div>
            <div class="ibox-content">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>Key</th>
                                <th>Value</th>
                                <th>Delete</th>
                            </tr>
                            </thead>
                            <tbody id="header">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="addHeader()"> Add </button>
                <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/static/plugins/js/jquery.js"></script>
<script src="/static/plugins/template/plugins/fullavatareditor/scripts/jQuery.Cookie.js"></script>
<script src="/static/plugins/js/bootstrap.js"></script>
<script src="/static/plugins/template/js/content.min.js?v=1.0.0"></script>
<script src="/static/plugins/template/js/plugins/iCheck/icheck.min.js"></script>
<script src="/static/plugins/template/js/plugins/json-view/jquery.json-viewer.js"></script>
<script src="/static/plugins/template/js/content.min.js?v=1.0.0"></script>
<script src="/static/plugins/js/vue.js"></script>
<script src="/static/js/zfs-api-ui.js"></script>
<script src="/static/js/zfs-api-cookie.js"></script>
<script src="/static/js/zfs-api-header.js"></script>
</html>